<template>
	<view class="content">
		<view style="background-color: #f3f3f3;">
			<u-row>
				<u-col span="12">
					<view style="padding:5px;background-color: #F3F3F3;height:40px;">
						<u-search placeholder="输入产品名进行搜索" search-icon-color="#239965" border-color="#239965"
							v-model="keyword" :show-action="false" @search='getProducts'>
						</u-search>
					</view>
				</u-col>
			</u-row>
		</view>
		<view style="width:100vw;">
			<scroll-view class="left" scroll-y>
				<view v-for="item in categories" style="text-align:center;height:calc(10vh - 10px)">
					<view v-if="choosedCategory == item.id" class="active">
						<view style="padding:10px">
							<view style="font-size:12px;">
								{{item.name}}
							</view>
						</view>
					</view>
					<view v-else @click="changeCategory(item.id)">
						<view style="padding:13px 10px">
							<view style="font-size:12px;">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<scroll-view class="right" scroll-y scroll-x @scrolltolower="nextPage" lower-threshold="20">
				<view v-if="products && products.length > 0" style='padding-bottom:65px'>
					<view class="product" v-for="(item,index) in products" :key='index'>
						<view style="width:100%;border-bottom: solid #F3F3F3 1px;padding-bottom: 10px;">
							<u-row>
								<u-col :span="4" @click="toUrl(`/pages/category/product?id=${item.id}`)">
									<view style='padding:8px'>
										<view v-if='item.cover == null || item.cover == ""' style='max-height:76px'>
											<u--image :showLoading="true" src="/static/logo.jpg" width="100%"
												mode='widthFix'></u--image>
										</view>
										<view v-else style='max-height:76px'>
											<u--image :showLoading="true" :src="item.cover" width="100%"
												mode='widthFix'></u--image>
										</view>
									</view>
								</u-col>
								<u-col :span="8">
									<view>
										<view class='name' @click="toUrl(`/pages/category/product?id=${item.id}`)">
											<text v-if="item.tags != null && item.tags.length > 0">
												<text v-for="tag in item.tags">
													<text class="product-tag-text">{{tag}}</text>
												</text>
											</text>
											<text class="product-name">
												{{item.name}}
											</text>
										</view>
										<view class="product-sub-title" v-if="item.subTitle != null"
											@click="toUrl(`/pages/category/product?id=${item.id}`)">{{item.subTitle}}
										</view>
										<view>
											<view>
												<u-row>
													<u-col span='6'>
														<view>
															<text class='price'>￥{{item.specifications[0].price}}</text>
														</view>
													</u-col>
													<u-col span='6'
														v-if='item.specifications && item.specifications.length == 1'>
														<view>
															<view v-if='item.quantity > 0'>
																<u-row>
																	<u-col span='4'>
																		<view class="minus" @click='pev(index)'>
																			<u-icon name="minus" size="12"></u-icon>
																		</view>
																	</u-col>
																	<u-col span='4'>
																		<view style="text-align: center;" class="input">
																			{{item.quantity}}
																		</view>
																	</u-col>
																	<u-col span='4'>
																		<view class="plus" @click='add(index)'>
																			<u-icon name="plus" color="#FFFFFF"
																				size="12"></u-icon>
																		</view>
																	</u-col>
																</u-row>
															</view>
															<view v-else>
																<u-row>
																	<u-col span='4'>
																		<view>
																		</view>
																	</u-col>
																	<u-col span='4'>
																		<view style="text-align: center;" class="input">
																		</view>
																	</u-col>
																	<u-col span='4'>
																		<view class="plus" @click='add(index)'>
																			<u-icon name="plus" color="#FFFFFF"
																				size="12"></u-icon>
																		</view>
																	</u-col>
																</u-row>
															</view>
														</view>
													</u-col>
													<u-col v-else span='6'>
														<view style='text-align: right;padding-right:10px'>
															<text class='spec-btn'
																@click='chooseProduct(item)'>选规格</text>
														</view>
													</u-col>
												</u-row>
											</view>
										</view>
									</view>
								</u-col>
							</u-row>
						</view>
					</view>
					<u-loadmore :status="status" />
				</view>
				<view v-else style="height: 80vh;padding-top: 50%;">
					<u-empty text="暂无商品" mode="list"></u-empty>
				</view>
			</scroll-view>
		</view>
		<!-- 弹出需要选择的标签 -->
		<u-popup v-if='chooseProduct != ""' :show="showTag" @close="showTag = false" mode='bottom' round='10'>
			<view style='max-height: 65vh;padding: 20px 10px 30px 10px;overflow: auto;'>
				<u-divider :text="choosedProduct.name"></u-divider>
				<view>
					<view class="container">
						<view class="item" v-for='item in choosedProduct.specifications'>
							<view v-if='choosedSpec.id == item.id' class='spec-active'>
								{{item.name}}
							</view>
							<view v-else class='spec' @click='choosedSpec = item'>{{item.name}}</view>
						</view>
					</view>
				</view>
				<view style='padding:10px'>
					<u-row>
						<u-col span='6'>
							<view style='color:#ff9900'>
								￥{{choosedSpec.price}}
							</view>
						</u-col>
						<u-col span='6'>
							<view style='float: right;'>
								<u-number-box v-model="quantity">
									<view slot="minus" class="minus">
										<u-icon name="minus" size="12"></u-icon>
									</view>
									<text slot="input" style="width: 50px;text-align: center;"
										class="input">{{quantity}}</text>
									<view slot="plus" class="plus">
										<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
									</view>
								</u-number-box>
							</view>
						</u-col>
					</u-row>
				</view>
				<view style='padding-top:10px'>
					<u-button text='加入购物车' type='primary' @click='addSpec'></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categories: [],
				products: [],
				page: 1,
				limit: 10,
				choosedProduct: '',
				choosedCategory: '',
				status: 'loadmore',
				showTag: false,
				choosedSpec: '',
				quantity: 1,
				carts: [],
				keyword: ''
			}
		},
		onLoad() {
			this.getCategories()
		},
		onShow() {
			let carts = uni.getStorageSync('carts')
			if (carts != '') {
				this.carts = carts
				uni.setTabBarBadge({
					index: 2,
					text: `${carts.length}`
				})
			} else {
				uni.removeTabBarBadge({
					index: 2
				})
			}
		},
		methods: {
			getCategories() {
				this.request.get(`public/categories`, {
					'@filter': `entity.getType().getSlug() == 'product'`
				}).then((res) => {
					console.log(res.data)
					this.categories = res.data
					this.changeCategory(res.data[0].id)
				})
			},
			changeCategory(id) {
				this.choosedCategory = id
				this.products = []
				this.page = 1
				this.status = 'loadmore'
				this.getProducts()
			},
			getProducts() {
				uni.showLoading()
				let filter = `entity.getCategory().getId() == ${this.choosedCategory} && entity.getIsOnSale() == true`
				if (this.keyword != '') {
					this.products = []
					this.page = 1
					filter += ` && entity.getName() matches '${this.keyword}'`
				}
				this.request.get(`public/products`, {
					'@filter': filter,
					'@display': ['name', 'cover', 'specifications'],
					limit: this.limit,
					page: this.page
				}).then((res) => {
					console.log('product', res.data)
					if (res.data.length < this.limit) {
						this.status = 'nomore'
					}
					let carts = uni.getStorageSync('carts')
					for (let i of res.data) {
						i['quantity'] = 0
						if (carts != '') {
							for (let c of carts) {
								if (c.specId == i.specifications[0].id) {
									i['quantity'] = c.quantity
								}
							}
						}
						this.products.push(i)
					}
					uni.hideLoading()
				})
			},
			chooseProduct(product) {
				this.choosedProduct = product
				this.choosedSpec = product.specifications[0]

				this.showTag = true
			},
			nextPage() {
				if (this.status == 'loadmore') {
					this.page++
					this.getProducts()
				}
			},
			add(index) {
				this.products[index].quantity++
				this.getCartData(index, this.products[index].specifications[0].id)
			},
			pev(index) {
				this.products[index].quantity--
				this.getCartData(index, this.products[index].specifications[0].id)
			},
			addSpec() {
				let had = false
				for (let i of this.carts) {
					if (i.specId == this.choosedSpec.id) {
						had = true
						i.quantity = this.quantity
					}
				}
				if (!had) {
					this.carts.push({
						specId: this.choosedSpec.id,
						specName: this.choosedSpec.name,
						cover: this.choosedProduct.cover,
						quantity: this.quantity,
						name: this.choosedProduct.name,
						price: this.choosedSpec.price
					})
				}
				uni.setStorageSync('carts', this.carts)
				uni.setTabBarBadge({
					index: 2,
					text: `${this.carts.length}`
				})
				this.showTag = false
				this.quantity = 1
			},
			getCartData(index, specId) {
				let product = this.products[index]
				let had = false
				let cartIndex = 0
				for (let i in this.carts) {
					if (this.carts[i].specId == specId) {
						had = true
						this.carts[i].quantity = this.products[index].quantity
						break
					}
				}
				if (!had) {
					this.carts.push({
						specId: specId,
						specName: this.products[index].specifications[0].name,
						cover: this.products[index].cover,
						quantity: this.products[index].quantity,
						name: this.products[index].name,
						price: this.products[index].specifications[0].price
					})
				}
				if (this.products[index].quantity <= 0) {
					this.carts.splice(cartIndex, 1)
				}
				if (this.carts.length > 0) {
					uni.setStorageSync('carts', this.carts)
					uni.setTabBarBadge({
						index: 2,
						text: `${this.carts.length}`
					})
				} else {
					uni.removeStorageSync('carts')
					uni.removeTabBarBadge({
						index: 2
					})
				}

			},
			toUrl(page) {
				uni.navigateTo({
					url: page
				})
			}
		}
	}
</script>

<style scoped>
	.content {
		position: relative;
	}

	.category {
		padding: 10px;
		text-align: center;
	}

	.left {
		background-color: #f3f3f3;
		height: calc(100vh - 50px);
		width: 25%;
		float: left;
	}

	.right {
		height: calc(100vh - 100px);
		/* display: flex; */
		overflow: auto;
		width: 75%;
		float: left;
	}

	.active {
		background-color: white;
		border-radius: 20px 0px 0px 20px;
		color: #239965;
		padding: 10px 0px;
	}

	.spec-btn {
		background-color: #19be6b;
		font-size: 12px;
		color: #fff;
		padding: 3px 10px;
		border-radius: 14px;
	}

	.plus {
		width: 30px;
		height: 30px;
		background-color: #19be6b;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	.product-name {
		color: #606266;
	}

	.price {
		color: #ff9900;
	}


	.container {
		display: flex;
		flex-wrap: wrap;
	}

	.item {
		margin: 5px;
	}

	.spec-active {
		font-size: 14px;
		padding: 3px 10px;
		border-radius: 5px;
		background-color: #19be6b;
		color: #fff
	}

	.spec {
		font-size: 14px;
		padding: 3px 10px;
		border-radius: 5px;
		background-color: #909399;
		color: #fff;
	}

	.minus {
		width: 30px;
		height: 30px;
		background-color: #f3f3f3;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	.name {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		text-overflow: ellipsis;
		height:56px;
		font-size: 14px;
		padding:8px 8px 0px 5px;
	}
</style>